<template>
  <page-header-wrapper>
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <div class="table-operator" v-if="order.status === 1 && order.is_take >= 3">
          <a-form-model layout="inline" :model="formInline" @submit="handlePush" @submit.native.prevent >
            <a-form-model-item>
              <a-input v-model="formInline.express_firm" placeholder="快递公司">
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item class="form-item-express-number">
              <a-input v-model="formInline.express_number" placeholder="快递单号,门店自送则写“线下”">
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" html-type="submit" >发货</a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <a-descriptions title="订单信息">
          <a-descriptions-item label="订单编号" :span="3">{{ order.out_trade_no }}</a-descriptions-item>
          <a-descriptions-item label="是否使用优惠券" :span="3">{{ order.discount_id > 0 ? '是' : '否' }}</a-descriptions-item>
          <a-descriptions-item label="使用会员身份" :span="3">{{ order.is_vip_discount | kindsStatusFilter }}</a-descriptions-item>
          <a-descriptions-item label="联系人">{{ `${order.serve_name || ''} ${order.serve_mobile || ''}` }}</a-descriptions-item>
          <a-descriptions-item label="收获地址" :span="2">{{ order.serve_address }}</a-descriptions-item>
          <a-descriptions-item label="支付方式" :span="3">{{ order.pay_type | payTypeFilter }}</a-descriptions-item>
          <a-descriptions-item label="订单创建时间" :span="3">{{ order.ctime }}</a-descriptions-item>
          <a-descriptions-item label="快递公司" :span="1">{{ order.express_firm }}</a-descriptions-item>
          <a-descriptions-item label="快递单号" :span="2">{{ order.express_number }}</a-descriptions-item>
        </a-descriptions>
        <a-divider style="margin-bottom: 32px"/>

        <div class="table-title">商品列表</div>
        <a-table
          style="margin-bottom: 24px"
          row-key="id"
          :columns="columns"
          :dataSource="cart"
          :pagination="false"
        >
          <template slot="img_url" slot-scope="text">
            <a-avatar shape="square" :size="64" icon="skin" :src="text" style="width:110px;height:62px"/>
          </template>
          <template
            slot="is_self"
            slot-scope="is_self">
            <a-tag :color="is_self == 1 ?'blue' :'red'">{{ is_self | kindsStatusFilter }}</a-tag>
          </template>
        </a-table>
      </a-card>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import { goodsOrderDetail, goodsOrderSendEdit, goodsOrderSend } from '@/api/goods'
import orderStatus from '@/mixins/orderStatus'
import payStatus from '@/mixins/payStatus'

const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '价格',
    dataIndex: 'price',
    customRender (text) {
        return '￥' + text
    }
  },
  {
    title: '图片',
    dataIndex: 'img_url',
    scopedSlots: { customRender: 'img_url' }
  },
  {
    title: '数量',
    dataIndex: 'num'
  },
   {
    title: '是否自营',
    dataIndex: 'is_self',
    scopedSlots: { customRender: 'is_self' }
  }
]

export default {
  mixins: [orderStatus, payStatus],
  data () {
    return {
      cart: [],
      order: {},
      store: {},
      columns,
      loading: false,
      formInline: {
          express_firm: '',
          express_number: ''
      }
    }
  },
  created () {
      this.goodsOrderDetail()
  },
  methods: {
      goodsOrderDetail () {
          const params = this.$route.params
          this.loading = true
          return goodsOrderDetail(params).then(res => {
                this.cart = res.data.goods
                this.order = res.data.order
                this.formInline.express_firm = this.order.express_firm
                this.formInline.express_number = this.order.express_number
                this.loading = false
                return res.data
          })
      },
      handlePush (e) {
        const params = this.formInline
        const action = this.order.express_firm ? goodsOrderSendEdit : goodsOrderSend
        action(Object.assign({ id: this.order.id }, params)).then(res => {
            this.$message.success('发货成功')
            this.goodsOrderDetail()
        })
      }
  }

}
</script>

<style lang="less" scoped>
  .form-item-express-number{
      /deep/.ant-form-item-control-wrapper{
          width: 250px;
      }
  }
</style>
